


import MyHead from '@/components/MyHead'
import React, { FC, useEffect, useState } from 'react'
import BG from '@/assets/images/mine.gif'
import "./app.scss"
import { Avatar, List, Space, Button  , Dialog , Mask  , ProgressBar   } from 'antd-mobile'
import {defaultAvatar} from '@/utils/common'
import { connect } from 'react-redux'
import { getMyCollects, getMyLikes, getuserinfoasync, setuserinfo } from '@/redux/actions'
import { history } from 'umi';
import UploadFile from '@/components/UploadFile'
import { Ajax } from '@/api/api'
import { baseURL } from '@/api/request'
import {
    UnorderedListOutline,
    PayCircleOutline,
    SetOutline,
  } from 'antd-mobile-icons'
import Dao from '@/components/Dao'
import { ShowSuccess, ShowToast } from '@/utils/message'
import { useInterval } from 'ahooks';
import { useCheckLogin } from '@/hooks/common'


const Mine:FC<any> = ({
    dispatch,
    userInfo,
    mylikes,
    mycollects
}) => {
    let timer:any = null 
    const [cache,setCache] = useState<number>(Math.round(Math.random() * 100) )
    const [visible,setVisible] = useState<boolean>(false)
    let [percent,setPercent] = useState<number>(0)
    const [mytravels,setMyTravels] = useState<Array<any>>([])
    const [ checkLogin ] = useCheckLogin()
    

    const getAvatarPath = async (path:string)=>{
        // 前后端各自修改数据 
        let res:any = await Ajax.changeuserinfo({avatar:path})
        if(res.code==200){
            dispatch(setuserinfo({
                ...userInfo,
                avatar:path
            }))
        }
    }

    const logoutAction = ()=>{
        Dialog.confirm({
            content: '亲,你真的要退出登录吗???',
            onConfirm: () => {
                sessionStorage.removeItem('appToken')
                dispatch(setuserinfo(null))
            },
        })
    }
    const  startGetPercent = ()=>{
        timer = setInterval(()=>{
            if(percent<100){
                setPercent(percent++);
            }else{
                setVisible(false)
                ShowSuccess("缓存清除成功")
                setCache(0)
                setPercent(0)
                clearInterval(timer)
                timer = null 
            }
        },50)
    }

    const getMyTravels = async  ()=>{
        let res:any = await Ajax.getmytravels()
        if(res.code==200){
            setMyTravels(res.result )
        }
    }



    useEffect(()=>{

        // 已经登录 
        checkLogin(()=>{
            dispatch(getuserinfoasync())
            getMyTravels()

            dispatch(getMyLikes({
                flag:true 
            }))

            dispatch(getMyCollects({
                flag:true 
            }))
        })
        return ()=>{
            clearInterval(timer)
            timer = null 
        }
    },[])
    // const run = useInterval(() => {
    //     if(percent<100){
    //         setPercent(percent + 1);
    //     }else{
    //         setVisible(false)
    //         ShowSuccess("缓存清除成功")
    //         setCache(0)
    //         setPercent(0)
    //     }
    // }, 10);
    return (
        <div className='mine'>

            

            
            <MyHead title='我的' back={true} ></MyHead>

            <div className="mine-top" >
                <img className="top-img" src={BG} alt="" />
                {
                    userInfo ? <div className="info" >
                    <UploadFile emitPath={getAvatarPath} >
                        {
                            userInfo.avatar ? 
                            <Avatar src={userInfo.avatar.replace(/public/,baseURL)}   className='avatar' />
                            : <Avatar src={defaultAvatar}  className='avatar' />
                        }
                    </UploadFile>
                    
                    <h3 className="name"> {userInfo.username }</h3>
                    <h3 className="phone"> {userInfo.phone } </h3>
                </div> : <div className="info">
                    <Button color="success" onClick={()=>history.push('/login')}  className='tada1'>授权登录</Button>
                </div>
                }
            </div>

            <div className="mine-list" style={{padding:1}}>
                <List header='操作列表'>
                    {
                        userInfo && <div>
                            <List.Item extra={mytravels.length} prefix={<UnorderedListOutline />} onClick={() => {
                                history.push('/app/find')
                            }}>
                                我的游记
                            </List.Item>
                            <List.Item extra={100} prefix={<PayCircleOutline />} onClick={() => {
                                history.push("/mylikes?type=0")
                            }}>
                                我的足迹
                            </List.Item>
                            <List.Item prefix={<SetOutline />} extra={mylikes.length} onClick={() => {
                                history.push("/mylikes?type=1")
                            }}>
                                我的点赞
                            </List.Item>
                            <List.Item prefix={<SetOutline />} extra={mycollects.length } onClick={() => {
                                history.push("/mylikes?type=2")
                            }}>
                                我的收藏
                            </List.Item>
                            <List.Item prefix={<SetOutline />} onClick={() => {}}>
                                钱包
                            </List.Item>
                            <List.Item prefix={<SetOutline />} onClick={() => history.push('/changepass?password='+userInfo.password)}>
                                修改密码
                            </List.Item>
                        </div>
                    }
                    <List.Item prefix={<SetOutline />} onClick={() => {}}>
                        公告
                    </List.Item>
                    <List.Item prefix={<SetOutline />} onClick={() => {}}>
                        设置
                    </List.Item>
                    <List.Item prefix={<SetOutline />} onClick={() => {}}>
                        联系我们
                    </List.Item>
                    <List.Item prefix={<SetOutline />}  extra={ cache + 'M' } onClick={() => {
                        if(cache==0){
                            ShowToast('缓存已经全部清除')
                        }else{
                            setVisible(true);
                            startGetPercent()
                        }
                    }}>
                        清除缓存
                    </List.Item>
                </List>
            </div>

            {
                userInfo && <div className="logout" style={{margin:16}}>
                <Button block color='default' onClick={logoutAction }>退出登录</Button>
            </div>
            }


            <Mask
                destroyOnClose={true}
                visible={visible}
                style={{
                    zIndex:10000,
                    display:'flex',
                    justifyContent:'center',
                    alignItems:'center',
                    width:'100vw',
                    padding:15
                }}

            >
                <div style={{width:'100%',color:"#fff"}}>
                    <ProgressBar  percent={percent} text  style={{color:"#fff"}}/>
                </div>
                {/* <Dao style={{
                    left:'50%',
                    top:'50%',
                    transform:"translate('-50%','-50%')"
                }}
                onEnd={()=>{
                    ShowSuccess("缓存清除成功")
                    setCache(0)
                    setVisible(false)
                }}
                >

                </Dao> */}
            </Mask>
        </div>
    )
}

export default connect((state:any)=>{
    return {
        userInfo:state.userInfo,
        mylikes:state.mylikes,
        mycollects:state.mycollects
    }
})(Mine)